<template>
  <div class="news-main">
    <ul class="news-list">
      <li v-for="item in newsData" @click="() => go(`/news/detail`)">
        <div class="news-left thumb" :title="item.title">
          <div>{{ item.type }}：</div>
          <div class="title overOne">{{ item.title }}</div>
        </div>
        <span class="date">{{ item.create_time }}</span>
      </li>
    </ul>

    <div class="paging">
      <Paging bg-color="white" option-color="#3644BF" :total_porp="200000" />
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { News } from "@/interface";
import Paging from "@/components/Paging/index.vue";
import { useRouter } from "vue-router";

const router = useRouter();

const newsData = ref<Array<News>>([
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `通知`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `快报`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `最新`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `最新`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `通知`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `通知`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `通知`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `通知`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `通知`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `通知`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `通知`,
    create_time: `2023-01-11`,
  },
  {
    title: `毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤毛衣+直筒裤，才是真正的冬直筒裤`,
    type: `通知`,
    create_time: `2023-01-11`,
  },
]);

const go = (path: string) => {
  router.push(path);
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
